<template>
	<view class="c-content">
		<view class="pro-add r-flex">
			<text class="add-view">基本信息</text>
			<u-button icon="edit-pen" :plain="true" @click="detailEdit()" iconColor="#bcbfcc" color="#bcbfcc"
				shape="circle" text="编辑">
			</u-button>
		</view>
		<view class="party" style="margin-bottom: 0;">
			<view class="party-detail">
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.name)=='-'}]">
					<text class="item">案件名称:</text>
					<text>{{common.noNull(caseInfo.name)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.caseNum)=='-'}]">
					<text class="item">案件编号:</text>
					<text>{{common.noNull(caseInfo.caseNum)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.caseType)=='-'}]">
					<text class="item">案件类型:</text>
					<text>{{common.noNull(caseInfo.caseType)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.cause)=='-'}]">
					<text class="item">案由:</text>
					<text>{{common.noNull(caseInfo.cause)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.createTime)=='-'}]">
					<text class="item">委托日期:</text>
					<text>{{common.noNull(caseInfo.createTime)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.name)=='-'}]">
					<text class="item">结案状态:</text>
					<text>无</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.fee)=='-'}]">
					<text class="item">标的额:</text>
					<text>{{common.noNull(caseInfo.fee)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.lawyerFeeTime)=='-'}]">
					<text class="item">收费时间:</text>
					<text>{{common.noNull(caseInfo.lawyerFeeTime)}}</text>
				</view>
				<view :class="['detail-item',{'isGray':common.noNull(caseInfo.name)=='-'}]">
					<text class="item">备注:</text>
					<text></text>
				</view>
			</view>
		</view>
		<view class="pro-add r-flex">
			<text class="add-view">案件程序</text>
			<u-button icon="plus" :plain="true" @click="addProgram()" iconColor="#bcbfcc" color="#bcbfcc" shape="circle"
				text="新增">
			</u-button>
		</view>
		<view class="party" v-for="i in 2" :key="i">
			<view class="blank">仲裁</view>
			<view class="party-detail">
				<view :class="['detail-item',{'isGray':isGray == true}]">
					<text class="item">申请时间:</text>
					<text>2023-07-08</text>
				</view>
				<view class="detail-item">
					<text class="item">受理单位:</text>
					<text>合肥市包河区人民法院</text>
				</view>
				<view class="detail-item">
					<text class="item">受理类型:</text>
					<text>法院</text>
				</view>
				<view class="detail-item">
					<text class="item">审理结果:</text>
					<text>胜诉</text>
				</view>
				<view class="detail-item">
					<text class="item">裁定日期:</text>
					<text>2023-04-07</text>
				</view>
				<view :class="['detail-item',{'isGray':isGray == true}]">
					<text class="item">备注:</text>
					<text></text>
				</view>
			</view>
		</view>
		<view class="pro-add r-flex">
			<text class="add-view">办案人员</text>
		</view>
		<view class="party">
			<view class="party-detail">
				<view :class="['detail-item',{'isGray':isGray == true}]">
					<text class="item">案件主办:</text>
					<text>贾良骏</text>
				</view>
				<view class="detail-item">
					<text class="item">律师助理:</text>
					<text>罗征民</text>
				</view>
				<view class="detail-item">
					<text class="item">案件协同:</text>
					<text>贾良骏</text>
				</view>
			</view>
		</view>
		<u-gap height="16" bgColor="#f7f6fa"></u-gap>
	</view>
</template>

<script>
	import caseDetail from "../caseList/caseDetail.js"
	export default {
		mixins: [caseDetail],
		data() {
			return {
				isGray: true,
			}
		},
		methods: {
			detailEdit() {
				uni.navigateTo({
					url: "/pages/caseList/detail/detailEdit?item=" + encodeURIComponent(JSON.stringify(this
						.caseInfo))
				})
			},
			addProgram() {
				uni.navigateTo({
					url: "/pages/caseList/detail/caseProgram"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-content {
		width: 100%;
		padding: 0 24rpx;
	}

	.party {
		position: relative;
		padding: 30rpx 24rpx;
		border-radius: 10rpx;
		background-color: #fff;
		min-height: 200rpx;
		margin-top: 28rpx;
	}

	.party-detail {
		.detail-item {
			position: relative;
			padding: 12rpx 0 12rpx 32rpx;

			.item {
				padding-right: 10rpx;
			}
		}

		.detail-item::before {
			display: inline-block;
			position: absolute;
			left: 0;
			top: 26rpx;
			width: 10rpx;
			height: 10rpx;
			background-color: #1C5AD2;
			border-radius: 50%;
			content: '';
		}

		.isGray::before {
			background-color: #ccc;
		}
	}

	.pro-add {
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 0 0 0;

		.add-view {
			width: 35%;
			font-size: 30rpx;
			flex: 1;
		}
	}

	.pro-add /deep/ .u-button {
		width: 112rpx;
		height: 44rpx;
		background-color: inherit;
	}

	.pro-add /deep/ .u-button__text {
		font-size: 24rpx !important;
	}

	.pro-add /deep/ .u-icon__icon {
		font-size: 26rpx !important;
	}

	.blank {
		position: absolute;
		top: 0;
		right: 0;
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: #1C5AD2;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		text-align: center;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
		z-index: 1;
	}
</style>